<template>
	<view>
		<u-navbar title="任务列表" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-leftward" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-search placeholder="搜索积水点,地点人名" v-model="keyword" shape="round" :clearabled="true" bg-color="#fff" margin="30rpx 0rpx"></u-search>
		    <ul class="tab">
				<li class="active">全部</li>
				<li>指派给我的</li>
				<li>我指派的</li>
				<li>待指派的</li>
			</ul>
			<scroll-view scroll-y="true" style="height: 1000rpx;">
				 <ul class="list-box">
					<li class="list-item" @click="viewDetails(item.id,item.type)" v-for="(item,index) in lists">
						<div class="i-top">
							<span>{{item.typeName}}</span>
							<u-tag class="radius-style" :text="item.statusName" type="error" :bg-color="getBgColor(item.statusName)" :color="getColor(item.statusName)" mode="dark" />
						</div>
						<!-- 积水险情 -->
						<div v-if="item.type == 1">
							<div class="i-item">
								<span>
									<i>险情地点：</i>
									<em>{{safe(item.address)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>积水深度：</i>
									<em>{{safe(item.labelValue1)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>发生时间：</i>
									<em>{{safe(item.startTime)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>上报人：</i>
									<em>{{safe(item.handlerName)}}&nbsp;&nbsp;{{safe(item.phone)}}</em>
								</span>
							</div>
						</div>
						<!-- 工程险情 -->
						<div v-if="item.type == 2">
							<div class="i-item">
								<span>
									<i>险情地点：</i>
									<em>{{safe(item.address)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>工程险情：</i>
									<em>{{safe(item.labelValue1)}}</em>
								</span>
								<span>
									<i>发生时间：</i>
									<em>{{safe(item.startTime)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>上报人：</i>
									<em>{{safe(item.handlerName)}}&nbsp;&nbsp;{{safe(item.phone)}}</em>
								</span>
							</div>
						</div>
						<!-- 人员转移 -->
						<div v-if="item.type == 3">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{safe(item.address)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务描述：</i>
									<em>{{safe(item.labelValue1)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{safe(item.startTime)}}</em>
								</span>
							</div>
						</div>
						<!-- 物资调度 -->
						<div v-if="item.type == 4">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{safe(item.address)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>物资仓库：</i>
									<em>{{safe(item.labelValue1)}}</em>
								</span>
								<span>
									<i>物资数量：</i>
									<em>{{safe(item.labelValue2)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{safe(item.startTime)}}</em>
								</span>
							</div>
						</div>
						<!-- 力量调度 -->
						<div v-if="item.type == 5">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{safe(item.address)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>防汛队伍：</i>
									<em>{{safe(item.labelValue1)}}</em>
								</span>
								<span>
									<i>调度数量：</i>
									<em>{{safe(item.labelValue2)}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{safe(item.startTime)}}</em>
								</span>
							</div>
						</div>
						<div class="btn">
							<u-button type="primary" size="mini" @click="dispose">处置</u-button>
							<u-button type="primary" size="mini">转派</u-button>
						</div>
					</li>
				 </ul>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {myMixin} from '../../../mixins/mixin.js' 
	import {ObjectUtil} from '../../../assets/js/Oak.js' 
	export default {
		name: 'monitorCurve',
		props: {
			
		},
		mixins:[myMixin],
		data() {
			return {
				background: {
					backgroundColor: '#277fe6',
				},
				keyword: '',
				lists:[]
			};
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
		
			search(){
				
			},
			viewDetails(id,type){
				uni.navigateTo({url: '/pages/scheduling/taskManage/details?id='+id+'&type='+type});
			},
			dispose(id,type){
				uni.navigateTo({url: '/pages/scheduling/taskManage/dispose?id='+id+'&type='+type});
			},
			taskList(){
				this.$api.reqApi.taskList().then(res => {
					if(res.code == 200){
						this.lists = res.data
					}
				})
			},
			
			safe:function(o){
				let display = ObjectUtil.Common.safeDisplay(o);
				return display;
			}
		},
		mounted() {
			this.taskList()
		}
	}
</script>

<style lang="scss" scoped>
.tab{
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	height: 80rpx;
	li{
		border-bottom: 2px solid transparent;
		padding: 0 8rpx;
		line-height: 70rpx;
		&.active{
			border-color: #007AFF;
		}
	}
}
.content{
	margin: 0 30rpx;
}
.list-box{
	i{
		font-style: inherit;
	}
	.list-item{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		border: 1px solid #ddd;
		position: relative;
		.i-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&>span{
				flex: 1;
				font-size: 32rpx;
				color: #101010;
				font-weight: 300;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.radius-style{
			border-bottom-right-radius: 24rpx;border-top-left-radius: 24rpx;border-top-right-radius: 0;border-bottom-left-radius: 0;
		}
		.i-item{
			color: #aaa;
			margin-top: 10rpx;
			span:first-child{
				margin-right: 20rpx;
			}
			i,em{
				font-size: 28rpx;
				font-style: inherit;
			}
		}
		.btn{
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			.u-size-mini{
				margin-left: 10rpx;
			}
		}
	}
}
</style>
